<template>
  <div>
    <editor
      v-model="myValue"
      :init="init"
      :api-key="apiKey"
      :disabled="disabled"
    />
  </div>
</template>

<script>
import { upload } from "@/services/common/tinymce";
// import { fileUpload } from '@/api/cms'
import tinymce from "tinymce/tinymce";
import Editor from "@tinymce/tinymce-vue";

// import 'tinymce/themes/modern/theme'
import "tinymce/themes/silver/theme";
import "tinymce/icons/default/icons";
import "tinymce/plugins/image"; // 插入上传图片插件
import "tinymce/plugins/media"; // 插入视频插件
import "tinymce/plugins/table"; // 插入表格插件
import "tinymce/plugins/link"; // 超链接插件
import "tinymce/plugins/code"; // 代码块插件
import "tinymce/plugins/lists"; // 列表插件
import "tinymce/plugins/contextmenu"; // 右键菜单插件
import "tinymce/plugins/wordcount"; // 字数统计插件
import "tinymce/plugins/colorpicker"; // 选择颜色插件
import "tinymce/plugins/textcolor"; // 文本颜色插件
import "tinymce/plugins/fullscreen"; // 全屏
import "tinymce/plugins/help"; // 帮助
import "tinymce/plugins/charmap";
import "tinymce/plugins/paste";
import "tinymce/plugins/print"; // 打印
import "tinymce/plugins/preview"; // 预览
import "tinymce/plugins/hr"; // 水平线
import "tinymce/plugins/anchor";
import "tinymce/plugins/pagebreak";
import "tinymce/plugins/spellchecker";
import "tinymce/plugins/searchreplace";
import "tinymce/plugins/visualblocks";
import "tinymce/plugins/visualchars";
import "tinymce/plugins/insertdatetime";
import "tinymce/plugins/nonbreaking";
import "tinymce/plugins/autosave";
import "tinymce/plugins/fullpage";
import "tinymce/plugins/toc";
import "tinymce/plugins/advlist";
import "tinymce/plugins/autolink";
import "tinymce/plugins/codesample";
import "tinymce/plugins/directionality";
import "tinymce/plugins/imagetools";
import "tinymce/plugins/noneditable";
import "tinymce/plugins/save";
import "tinymce/plugins/tabfocus";
import "tinymce/plugins/textpattern";
import "tinymce/plugins/template";
import "tinymce/plugins/emoticons";
import "tinymce/plugins/autoresize";

export default {
  components: {
    Editor,
  },
  props: {
    height: {
      type: Number,
      default: 200,
    },
    value: {
      type: String,
      default: "",
    },
    menubar: {
      type: [String, Boolean],
      default: true,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    plugins: {
      type: [String, Array],
      default:
        "print preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template code codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount imagetools textpattern help emoticons autosave  autoresize ",
    },
    toolbar: {
      type: [String, Array],
      default:
        "code undo redo restoredraft | cut copy paste pastetext | forecolor backcolor bold italic underline strikethrough link anchor | alignleft aligncenter alignright alignjustify outdent indent | \
    styleselect formatselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat | \
    table image media charmap emoticons hr pagebreak insertdatetime print preview | fullscreen |  lineheight ",
    },
  },
  data() {
    return {
      tinymceId: Math.random(),
      apiKey: "jzlds2e6urz6akm9wxp4f70mnwg83d8fovsialqazxowyity" + new Date(),
      // 配置文件服务器的静态访问路径前缀
      // static_web_preurl: 'http://localhost/files/hxzy_img/',
      // 初始化配置
      init: {
        placeholder: "在这里输入文字",
        language_url: "/tinymce/langs/zh_CN.js",
        language: "zh_CN",
        skin_url: "/tinymce/skins/ui/oxide",
        height: this.height,
        min_height: this.height,
        plugins: this.plugins,
        toolbar: this.toolbar,
        menubar: this.menubar,
        relative_urls: false,
        convert_urls: false,
        branding: false,
        fontsize_formats: "12px 14px 16px 18px 24px 36px 48px 56px 72px",
        font_formats:
          "微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;",
        importcss_append: true,
        images_upload_handler: (blobInfo, success, failure) => {
          const formData = new FormData();
          formData.append("correlationId", "tinymce"); //添加file表单数据
          formData.append("relativePath", "tinymce/files"); //添加file表单数据
          formData.append("file", blobInfo.blob());
          upload(formData)
            .then((result) => {
              if (result.code === 200) {
                success(result.data[0].path);
                return;
              } else {
                failure("上传失败");
              }
            })
            .catch(() => {
              failure("上传出错");
            });
        },
      },
      myValue: this.value,
    };
  },
  watch: {
    value(newValue) {
      this.myValue = newValue;
    },
    myValue(newValue) {
      this.$emit("input", newValue);
    },
  },
  mounted() {
    tinymce.init({});
  },
  methods: {
    /**
     *
     */
    onClick(e) {
      this.$emit("onClick", e, tinymce);
    },

    /**
     * 可以添加一些自己的自定义事件，如清空内容
     */
    clear() {
      this.myValue = "";
    },

    /**
     *光标处插入
     */
    insert(value) {
      tinymce.activeEditor.execCommand("mceInsertContent", false, value);
    },

    /**
     *获取文本
     */
    getTxt(index = 0) {
      var activeEditor = tinymce.editors[index];
      var editBody = activeEditor.getBody();
      activeEditor.selection.select(editBody);
      return activeEditor.selection.getContent({ format: "text" });
    },
  },
};
</script>
<style scoped>
</style>
